import React, {useCallback, useState, useEffect} from 'react';
import {Select, Button, Spin, message} from 'antd';
import {downloadCorePageApi, getPageBizList} from '~/service/performance';
import {CORE_PAGE_ID} from '~/utils/const';
import DateRangeAndDurationSelector from '../common/DateRangeAndDurationSelector';
import {calcDateRangeStr} from '../utils';
import Pages from './pages';
import useData from './data';
import './index.styl';

const {Option} = Select;
export default () => {
    const [
        {dateRange, duration, application, formatPaths, filterPaths},
        setApplication,
        setDateRangeAndDuration
    ] = useData();
    // appilcation list
    const [appList, setAppList] = useState([]);
    // 设置下载状态
    const [showLoading, setShowLoading] = useState(false);

    // 数据下载
    const downloadData = useCallback(async () => {
        const [startTime, endTime] = calcDateRangeStr(dateRange);
        const param = filterPaths.map(item => ({...item, startTime, endTime, timeType: duration, levelType: 1}));

        setShowLoading(true);
        await downloadCorePageApi(param);
        setShowLoading(false);
    });

    useEffect(() => {
        getPageBizList({
            pageId: CORE_PAGE_ID
        }).then(res => {
            if (res.code === 0) {
                setAppList(res.data);
            }
            else {
                message.error(res.msg);
            }
        });
    }, []);

    return (
        <div className="gaotu-core-pages-monitor">
            <Spin spinning={showLoading}>
                <div className="gaotu-core-pages-monitor-header">
                    <span className="title">高途核心页面监控</span>
                    <span className="tip">按天查看时，数据更新时间为T+1</span>
                    <hr className="line" />
                    <div className="gaotu-core-pages-option">
                        <DateRangeAndDurationSelector
                            dateRange={dateRange}
                            duration={duration}
                            setDateRangeAndDuration={setDateRangeAndDuration}
                        />
                        <div className="applicationSelector">
                            应用:
                            <Select
                                style={{width: 150, marginLeft: 10}}
                                value={application}
                                onChange={setApplication}
                            >
                                <Option key="all" value="all" title="全部">全部</Option>
                                {
                                    appList.map(item => (
                                        <Option key={item} value={item} title={item}>
                                            {item}
                                        </Option>
                                    ))
                                }
                            </Select>
                        </div>
                        <Button type="primary" onClick={downloadData}>数据下载</Button>
                    </div>
                </div>
                <div className="gaotu-core-pages-monitor-content">
                    <Pages formatPaths={formatPaths} duration={duration} dateRange={dateRange} />
                </div>
            </Spin>
        </div>
    );
};
